<template>
  <div class="home-container">
    <!-- 主欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="welcome-icon">
          <el-icon :size="80">
            <Star />
          </el-icon>
        </div>
        <h1 class="welcome-title">欢迎来到剧本杀管理系统</h1>
        <p class="welcome-subtitle">你好，{{ userName }} 👋</p>
        <p class="welcome-date">{{ greeting }}，{{ currentDate }}</p>
      </div>
    </div>

    <!-- 系统简介 -->
    <div class="intro-section">
      <h2 class="section-title">系统简介</h2>
      <p class="intro-text">
        剧本杀管理系统是一个专业的剧本杀行业综合管理平台，致力于为发行商、店铺和玩家提供便捷、高效的服务体验。
        我们通过数字化手段，连接剧本创作、发行、店铺运营和玩家预约等各个环节，让剧本杀行业更加规范化、专业化。
      </p>
    </div>

    <!-- 系统特色 -->
    <div class="features-section">
      <h2 class="section-title">系统特色</h2>
      <el-row :gutter="24" class="features-row">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="feature-card">
            <div class="feature-icon blue">
              <el-icon :size="40">
                <Document />
              </el-icon>
            </div>
            <h3 class="feature-title">剧本管理</h3>
            <p class="feature-desc">
              海量剧本资源，智能分类检索，为您提供丰富的剧本选择
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="feature-card">
            <div class="feature-icon green">
              <el-icon :size="40">
                <Shop />
              </el-icon>
            </div>
            <h3 class="feature-title">店铺运营</h3>
            <p class="feature-desc">
              完善的店铺管理功能，助力店铺高效运营和业务增长
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="feature-card">
            <div class="feature-icon orange">
              <el-icon :size="40">
                <User />
              </el-icon>
            </div>
            <h3 class="feature-title">用户体验</h3>
            <p class="feature-desc">
              简洁直观的操作界面，为不同角色提供专属的功能体验
            </p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="feature-card">
            <div class="feature-icon purple">
              <el-icon :size="40">
                <DataLine />
              </el-icon>
            </div>
            <h3 class="feature-title">数据分析</h3>
            <p class="feature-desc">
              专业的数据统计分析，帮助您了解运营状况和市场趋势
            </p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部信息 -->
    <div class="footer-section">
      <p class="footer-text">开始使用左侧菜单探索更多功能</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import {
  DataLine,
  Document,
  Shop,
  User,
  Star,
} from '@element-plus/icons-vue'

const userStore = useUserStore()

// 用户名
const userName = computed(() => {
  const info = userStore.userInfo as Record<string, unknown>
  return (info?.username as string) || '游客'
})

// 当前日期
const currentDate = ref('')

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了'
})

// 更新日期
const updateDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const weekDay = weekDays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 ${weekDay}`
}

onMounted(() => {
  updateDate()
})
</script>

<style scoped lang="css">
.home-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 欢迎区域 */
.welcome-section {
  background: #409eff;
  border-radius: 8px;
  padding: 60px 40px;
  margin-bottom: 24px;
  text-align: center;
}

.welcome-content {
  color: white;
}

.welcome-icon {
  color: white;
  margin-bottom: 16px;
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  color: white;
  margin: 0 0 16px 0;
}

.welcome-subtitle {
  font-size: 18px;
  color: white;
  margin: 0 0 8px 0;
  opacity: 0.95;
}

.welcome-date {
  font-size: 14px;
  color: white;
  margin: 0;
  opacity: 0.9;
}

/* 系统简介区域 */
.intro-section {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
  text-align: center;
}

.intro-text {
  font-size: 15px;
  line-height: 1.8;
  color: #606266;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* 系统特色区域 */
.features-section {
  margin-bottom: 24px;
}

.features-row {
  margin-top: 16px;
}

.feature-card {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-icon.blue {
  background: #ecf5ff;
  color: #409eff;
}

.feature-icon.green {
  background: #f0f9ff;
  color: #67c23a;
}

.feature-icon.orange {
  background: #fdf6ec;
  color: #e6a23c;
}

.feature-icon.purple {
  background: #f4f4f5;
  color: #909399;
}

.feature-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
}

.feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
  margin: 0;
}

/* 底部区域 */
.footer-section {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.footer-text {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .welcome-section {
    padding: 48px 24px;
  }

  .welcome-title {
    font-size: 28px;
  }

  .intro-section {
    padding: 24px;
  }

  .section-title {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: 16px;
  }

  .welcome-section {
    padding: 40px 20px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .intro-section {
    padding: 20px;
  }

  .section-title {
    font-size: 20px;
  }

  .intro-text {
    font-size: 14px;
  }

  .feature-card {
    padding: 20px;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
  }

  .feature-title {
    font-size: 16px;
  }

  .feature-desc {
    font-size: 13px;
  }
}
</style>

